<html><head>
<title>
Search Form
</title>
</head><body><h2>Search Form:</h2>



<style>
body {
    background-color: #E0ECF8;
}
form{

   border-style: solid;
    border-width: 5px;
    border-color: #006400
}
</style>
<br>
<br>
<form name="srform" align="center">
<br>
<br>
<input size="48" id="search" type="text" align="center" name="Search" maxlength="100" style="background-color: white;">
<input type="button" value="Search" align="center" onclick="myFunction();" style="border-style: solid; width: 55px; height: 20px;">
 
<br>
<br>

<table style="width:20%" align="center">

  <tbody><tr>
    <td align="left">Select Age:</td>
    <td align="left"><select id="age">
  <option value=""></option>
  <option value="1-7 years">1-7 years</option>
  <option value="8-14 years">8-14 years</option>
  <option value="15-22 years">15-22 years</option>
  <option value="23-35 years">23-35 years</option>
  <option value="36-70 years">36-70 years</option>
    </select></td>
  </tr>
 
 <tr>
    <td align="left">Select Country:</td>
    <td align="left"><select id="country">
  <option value=""></option>
  <option value="Bulgaria">Bulgaria</option>
  <option value="Greece">Greece</option>
  <option value="Romania">Romania</option>
  <option value="Serbia">Serbia</option>
  <option value="Macedonia">Macedonia</option>
  <option value="Turkey">Turkey</option>
    </select></td>
 </tr>

  <tr>
    <td align="left">Select Town:</td>
    <td align="left">
     <input size="10" id="town" type="text" name="town" maxlength="150" placeholder="Ex. Sofia">
  
    </td>
 </tr>

 <tr>
 <td align="left">Subscriber:
 </td>
 </tr><tr>
 <td align="left">
<input type="checkbox" name="Yes" id="priorityHigh" onclick="if(this.checked) {document.srform.priorityLow.checked=false;}">Yes
<input type="checkbox" name="No" id="priorityLow" onclick="if(this.checked) {document.srform.priorityHigh.checked=false;}">No
 </td>
 </tr>
 
 <tr>
 <td align="left">Gender:</td>
 </tr>
  <tr>
 <td align="left">
<input type="checkbox" name="Male" id="priorityHigh1" onclick="if(this.checked) {document.srform.priorityLow1.checked=false;}">Male
<input type="checkbox" name="Female" id="priorityLow1" onclick="if(this.checked) {document.srform.priorityHigh1.checked=false;}">Female
 </td>
 </tr>

 <tr>

 </tr>
</tbody></table>
<br>
<br>
</form>


<script language="Javascript">
function myFunction(){
var search=document.getElementById("search").value;
var age=document.getElementById("age").value;
var country=document.getElementById("country").value;
var town=document.getElementById("town").value;
var myArray = new Array();
var numberSearch=0;
var validationSearch=false;
var male=document.getElementById("priorityHigh1").checked;
var female=document.getElementById("priorityLow1").checked;





for (var i=0; i < search.length; i++){
     myArray.push(search[i]);
     numberSearch++;
}

if (50>=numberSearch&&numberSearch>=3) {
  validationSearch=true;
    document.getElementById("search").style.backgroundColor = "white";

}else{
   
  alert("Mandatory. The Search field length must be between 3 and 50 characters");

    document.getElementById("search").style.backgroundColor = "red";
  return;
}

if (town.value == "") {
    alert("Town field must be filled out");
  document.getElementById("town").style.backgroundColor = "red";
    return false;
  } else if (document.getElementById("town").value.length > 150) {
    alert("Town cannot be more than 150 characters");
  document.getElementById("town").style.backgroundColor = "red";
    return false;
  } else if (/[^a-zA-Z]/.test(town)) {
    alert('Town field can only contain alphabetical characters');
  document.getElementById("town").style.backgroundColor = "red";
    return false;
  }
if (male) {
alert("The search was successiful!!!"+"\nSearch for: "+search+"\nAge Selected: "+age+"\nCountry selected: "+country+"\nTown selected: "+town+ "\nGender selected:Male ");
}
else if (female) {

  alert("The search was successiful!!!"+"\nSearch for: "+search+"\nAge Selected: "+age+"\nCountry selected: "+country+"\nTown selected: "+town+ "\nGender selected: Female ")
}
else{
  alert("The search was successiful!!!"+"\nSearch for: "+search+"\nAge Selected: "+age+"\nCountry selected: "+country+"\nTown selected: "+town)
}


}



</script>


</body></html>